<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Index Page</title>
    <!--使用th:href:“@{}”引入url资源-->
    <link rel="stylesheet" th:href="@{myIndex.css}">
<!--    <link rel="stylesheet" href="/myIndex.css">-->
</head>
<body>
<!--
    使用${}来插入传进来的上下文的值
    使用  |字符串|  可以实现字符串拼接
-->
<div class="app"></div>
<p th:text="${title}">Welcome to BeiJing!</p>
<p th:text="|666${title}zhangasn|">用||拼接字符串</p>
<hr>
<!--
    th:object：在父标签中选择对象
    *{}：先在父标签选择对象后，在子标签中使用，可以省略对象名.
-->
<p th:object="${user}">
    uid：<span th:text="*{uid}"></span><br>
    name：：<span th:text="*{username}"></span><br>
    password：<span th:text="*{userPwd}"></span><br>
</p>
<hr>
<!--if判断表达式-->
<h1 th:if="${user.username!=null}">name不为空</h1>
<!--
    列表渲染
    th:each 开始遍历
    th:each="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}"：
-->
<ul>
    <li th:each="l,lState:${list}" th:text="${lState.index}+${l}"></li>

</ul>
<hr>

</body>

<!--
    [[]]：内联表达式
        相当于th-text，这样就可以直接使用传过来的值，而不局限于作为标签的属性
        注意：这这时候取值要用 ${}
-->
<!--<script th:inline="javascript">-->
<!--    const user = [[${user}]];-->
<!--    console.log(user)-->
<!--</script>-->
</html>